import React from 'react';
import {message, Modal, Checkbox} from 'antd';
import _ from 'lodash';
import Table, {
    setColumnKeys
} from '../_/table';
import _name from './dev';
import redux from '../_/redux';
const CheckboxGroup = Checkbox.Group;

@redux('module', {actions: 'load'})
@redux('action', {prefix: 'action_', actions: 'load'})
export default class EditorMd extends React.Component {
    state = {selectedRowKeys: [], selectedRows: [], modal: false}

    componentWillReceiveProps(props) {
        const {sels} = props;
        const {sels: o} = this.props;
        if (sels !== o) {
            this.setState({sels});
            this.onCancel();
        }
    }

    onOk = () => {
        const {sels, selectedRows} = this.state;
        _.each(selectedRows, i => sels[i.Id] = '');
        this.postState(sels);
        this.onCancel();
    }

    onCancel = () => {
        this.setState({modal: false, selectedRowKeys: [], selectedRows: []});
    }

    onRemove = (e, id) => {
        e.stopPropagation();
        let {sels} = this.state;
        sels = _.omit(sels, id);
        this.postState(sels);
    }

    onWsAdd = () => {
        if (this.props.sels === undefined) {
            message.warning('请先选择工作台!!!');
        } else {
            this.setState({modal: true});
        }
    }

    onRowSelection = (r, i) => {
        const {selectedRowKeys, selectedRows} = this.state;
        if (_.indexOf(selectedRowKeys, i) >= 0) {
            _.pull(selectedRowKeys, i);
            _.pull(selectedRows, r);
        } else {
            selectedRowKeys.push(i);
            selectedRows.push(r);
        }
        this.setState({selectedRowKeys, selectedRows});
    }

    onCheckboxChange = (id, vals) => {
        const {sels} = this.state;
        sels[id] = vals.join(',');
        this.postState(sels);
    }

    postState = (sels) => {
        this.setState({sels});
        this.props.onState('mdchange', sels);
    }

    render() {
        const {data, sels, action_data: actionData} = this.props;
        const dataSourceSelected = _.filter(data, i => i.Status && _.has(sels, i.Id));
        const dataSourceCanSelected = _.filter(data, i => i.Status && !_.has(sels, i.Id));
        const actions = _.reduce(actionData, (res, i) => {
            res[i.Code] = i;
            return res;
        }, {});

        const columnsWs = [{
            title: '模块',
            dataIndex: 'Name'
        }, {
            title: '操作命令',
            dataIndex: 'Actions',
            render: (val, row) => {
                const vals = _.compact(sels[row.Id].split(','));
                const acts = _.compact((row.Actions || '').split(','));
                const options = _.map(acts, i => ({
                    key: new Date().getTime() + Math.random(),
                    value: i,
                    label: (actions[i] || {}).Name || i
                }));
                return options.length ?
                    (
                        <CheckboxGroup
                            value={vals}
                            options={options}
                            onChange={(vals) => this.onCheckboxChange(row.Id, vals)}
                        />
                    )
                    : '';
            }
        }, {
            width: 30,
            render: (val, row) => (
                <i title="移除" className="iconfont icon-shanchu remove" onClick={(e) => this.onRemove(e, row.Id)}/>
            )
        }];
        setColumnKeys(columnsWs);

        const columnsSelect = [{
            title: '编码',
            dataIndex: 'Code'
        }, {
            title: `名称`,
            dataIndex: 'Name'
        }, {
            title: '检索码',
            dataIndex: 'NameJp'
        }, {
            title: '图标',
            dataIndex: 'Icon'
        }, {
            title: '链接',
            dataIndex: 'Url'
        }, {
            title: '操作命令',
            dataIndex: 'Actions'
        }];
        setColumnKeys(columnsSelect);
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({selectedRows, selectedRowKeys});
            },
        };

        return (
            <div>
                <div>
                    <span className="title">模块权限</span>
                    <i
                        title="添加工作站"
                        className="iconfont icon-tianjia add"
                        onClick={this.onWsAdd}
                    />
                </div>
                <Table
                    size="small"
                    dataSource={dataSourceSelected}
                    columns={columnsWs}
                    pagination={false}
                    bordered={false}
                />

                <Modal
                    width={this.props.width}
                    title="添加模块"
                    okText="添加"
                    maskClosable={false}
                    onOk={this.onOk}
                    onCancel={this.onCancel}
                    wrapClassName={`${_name}MdModal`}
                    visible={this.state.modal}
                >
                    <Table
                        size="small"
                        rowSelection={rowSelection}
                        dataSource={dataSourceCanSelected}
                        columns={columnsSelect}
                        pagination={false}
                        onRowClick={this.onRowSelection}
                    />
                </Modal>
            </div>
        );
    }
}
